<template>
	<view>
		<view class="tabs">
			<scroll-view
				scroll-x="true"
				class="scroll-view-tabs"
			>
				<view
					class="scroll-view-tabs-item"
					v-for="(tabs, index) in tabsList"
					:key="index"
					:class="{ active: currentIndex === index }"
					@click="changeTabs(index)"
				>
					{{ tabs.name }}
				</view>
			</scroll-view>
		</view>
		<swiper
			:indicator-dots="false"
			:autoplay="false"
			:duration="100"
			:current="current"
			@change="changeSwiper"
			class="swiper"
			:style="{ height: swiperHeight + 'px' }"
		>
			<swiper-item
				v-for="(dataGroup, index) in swiperItem"
				:key="index"
			>
				<scroll-view
					scroll-y="true"
					:class="{ 'scroll-view': true, 'scroll-view-active': showScrollViewActive }"
					:lower-threshold="50"
					:refresher-enabled="false"
					@scrolltolower="toBottom"
					@scrolltoupper="toUpper"
				>
					<view class="scroll-view-item">
						<CardVue
							v-for="(cardData, cardindex) in dataGroup"
							:key="cardindex"
							:cardData="cardData"
						></CardVue>
						<view class="loadMore">
							<loaderTowVue
								v-if="!isOver"
								v-show="isLoadingMore"
							></loaderTowVue>
							<view v-if="isOver">
								<span>我也是有底线的</span>
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
import config from '../../../common/config/indexConfig';
import CardVue from '../index_card/Card.vue';
import loaderTowVue from '@/components/loaderTow/loaderTow.vue';
import { getCard, addCardList } from '@/common/api/cardApi.js';
export default {
	data() {
		return {
			//swiper上面的tab的索引
			currentIndex: 0,
			//swiper的索引
			current: 0,
			//swiper的高度
			swiperHeight: 800,
			showScrollViewActive: false,
			tabsList: config.indexTabs,
			//咱们得列表
			swiperItem: [],
			//是否正在加载更多
			isLoadingMore: true,
			//卡片列表
			localCardList: [],
			page: 1,
			//请求的次数
			requestNum: [],
			isOver: true
		};
	},
	components: {
		CardVue,
		loaderTowVue
	},
	props: {
		// cardList: {
		// 	type: Array
		// }
	},
	computed: {
		currentId() {
			return this.dataList[this.current].id;
		}
	},
	methods: {
		// 左右滑动屏幕执行的函数
		async changeSwiper(e) {
			this.current = e.detail.current;
			this.currentIndex = e.detail.current;
			this.isOver = false;
			await this.loadPage(this.current);
		},
		//分页加载
		async loadPage(page) {
			if (!this.swiperItem[page].length) {
				const data = await getCard({ pageNmu: this.page, pageSize: 10 }).catch((err) => {
					uni.$emit('hideLoading');
					this.isOver = true;
				});
				this.$set(this.swiperItem, page, data);
			} else {
			}
		},

		//初始化一下
		init() {
			/**
			 * 在这里触发加载效果
			 * 因为图片加载的慢，所以取消加载效果在轮播图组件里面
			 * 当轮播图全部加载完之后，就取消加载效果
			 */
			uni.$emit('showLoading');
			if (this.swiperItem.length == 0) {
				for (let i = 0; i < this.tabsList.length; i++) {
					this.swiperItem[i] = [];
					this.requestNum[i] = 0;
				}
				this.loadPage(this.current);
			} else {
				this.swiperItem = [];
				this.requestNum = [];
				//全部清空后重新调用一下自己
				this.init();
			}
		},
		// 设置高度
		setHeight() {
			this.showScrollViewActive = true;
		},
		// 到地下了 触发下拉刷新
		async toBottom() {
			//这是切换页面的数组的下标
			if (!this.isOver) {
				const requestNum = this.requestNum[this.current];
				const _index = this.current;
				this.isLoadingMore = true;
				await this.loadMoreData({ pageNum: _index, pageSize: 10, tags: config.indexTabs[this.currentIndex].tabsid, pageCount: requestNum });
				this.requestNum[this.current] += 1;
				// console.log(this.requestNum);
				this.isLoadingMore = false;
			} else {
				return;
			}
		},
		// 加载更多数据
		async loadMoreData(params) {
			console.log('触底了，要加载更多了~', params);
			await addCardList(params)
				.then((res) => {
					console.log('res里的data的值', res.data);
					this.swiperItem[0].push(...res.data);
					this.isOver = res.isOver;
					console.log(res);
					console.log(this.swiperItem);
				})
				.catch((err) => {
					this.isOver = true;
				});
		},
		toUpper() {
			this.showScrollViewActive = false;
		},
		changeTabs(index) {
			this.current = index;
			this.currentIndex = index;
		}
	},
	watch: {
		cardList: {
			immediate: true,
			handler(newVal) {
				this.localCardList = newVal;
			}
		}
	},
	mounted() {
		// this.getData();
		this.localCardList = this.cardList;
		uni.$on('isBottom', this.setHeight);
		uni.$on('initCardPage', this.init);
		uni.$on('reLoad', this.init);
	}
};
</script>

<style lang="scss">
.swiper {
	width: 100%;
	display: flex;
	// justify-content: center;
	align-items: center;
}
.scroll-view-active {
	height: 800px;
}
.scroll-view {
	width: 100%;
	display: flex;
	justify-content: space-between;
	.scroll-view-item {
		padding-left: 14rpx;
		width: 96%;
		display: grid;
		grid-template-columns: repeat(2,1fr);
		grid-gap: 10;
		grid-template-rows: masonry;
		.loadMore {
			width: 100%;
			height: 150rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
}
.tabs {
	width: 750rpx;
	.scroll-view-tabs {
		display: flex;
		justify-content: center;
		align-items: center;
		white-space: nowrap;
		width: 100%;
		height: 40px;
		line-height: 50px;
		.scroll-view-tabs-item {
			font-size: 12px;
			padding: 10px;
			display: inline-block;
			width: 20%;
			text-align: center;
			transition: 0.1s;
			height: 30px;
			line-height: 30px;
			color: #999;
		}
		.scroll-view-tabs-item.active {
			color: #000;
			font-weight: 700;
			height: 40px;
			scale: 1.4;
		}
	}
}
</style>
